<template>
  <div class="shop-container">
    <van-nav-bar left-text="积分商城" />
    <div class="search">
      <van-cell-group inset>
        <van-field
          v-model="inputValue"
          left-icon="search"
          placeholder="请输入搜索内容"
          center
          @keyup.esc="this.inputValue = ''"
        >
          <template #button>
            <van-button size="small" type="primary" @click="onSearchlist">搜索</van-button>
          </template></van-field
        >
      </van-cell-group>
    </div>

    <!-- 按照销量排序 -->

    <!-- 积分商品 -->
    <div class="good-content">
      <!-- 导航 -->
      <van-tabs v-model:active="active">
        <van-tab title="综合"></van-tab>
        <van-tab title="销量"></van-tab>
      </van-tabs>

      <!-- 商品内容 -->
      <div
        class="card"
        :class="item.status === '0' ? 'mask' : ''"
        v-for="item in list"
        :key="item.id"
        @click="onShopDetail(item.id)"
      >
        <img :src="item.pic ? 'http://192.168.101.65:9000' + item.pic : pic" alt="" />
        <p>{{ item.name }}</p>
        <div class="count">
          <p class="prize-count">{{ item.price }}积分</p>
          <p class="stock">库存 {{ item.stock }}</p>
        </div>
        <p class="stop" v-if="item.status === '0'"><span>停售</span></p>
      </div>
    </div>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { showToast } from 'vant'
import Tabbar from '../components/TabbarView.vue'
import debounce from 'lodash/debounce'
import { getShop, getSort } from '../api/shop.js'

export default {
  data() {
    return {
      active: 0,
      pic: require('../assets/image/default.png'),
      shoplist: [],
      // 输入框的值
      inputValue: '',
      // 搜索结果数组
      matchlist: [],
      // 是否按销量排序
      isSort: false
    }
  },
  created() {
    this.getShoplist()
  },
  components: {
    Tabbar
  },
  methods: {
    async getShoplist() {
      const { data: res } = await getShop()
      if (res.code === 1) {
        this.shoplist = res.data.items
      } else {
        showToast('获取数据失败')
      }
    },
    // 具体的积分商品信息
    onShopDetail(id) {
      this.$router.push(`/shop/${id}`)
    },
    // 按销量排序
    async getSort() {
      this.isSort = true
      const { data: res } = await getSort()
      this.shoplist = res.data
    },
    // 搜索（lodash防抖）
    onSearchlist: debounce(function (val) {
      console.log(val)
    }, 1000)
  },
  computed: {
    list() {
      return this.shoplist.filter((item) => {
        return item.name.includes(this.inputValue)
      })
    }
  },
  watch: {
    active(newVal) {
      if (newVal === 1) {
        this.getSort()
      } else {
        this.getShoplist()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.shop-container {
  height: 100vh;
  background-color: #f3f3f3;

  .van-nav-bar {
    background-color: #55c24d;
    font-size: 20px;
    color: #333;

    :deep(.van-nav-bar__text) {
      color: #fff;
      font-size: 16px;
      font-weight: 500;
    }
  }

  // 搜索框
  .search {
    width: 100%;
    height: 46px;
    margin: 5px 0;
    // background: #000;

    .van-cell-group {
      box-sizing: border-box;
    }

    .van-field {
      height: 100%;
      padding: 5px;
      border: 1px solid #333;
      border-radius: 10px;
    }
  }

  .good-content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 10px;

    // 综合、销量
    .van-tabs {
      width: 100%;
      height: 36px;
      line-height: 36px;
      padding: 0 10px;
      border-radius: 10px;
      margin: 5px 0 2px 0;
      border-radius: 10px;
    }

    .card {
      position: relative;
      width: 44.5%;
      height: 200px;
      background-color: #fff;
      margin: 10px;
      border-radius: 5px;
      overflow: hidden;

      img {
        width: 100%;
        height: 134px;
      }

      p {
        margin: 5px 0;
        padding-left: 10px;
      }
      .count {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .prize-count {
          color: #18a789;
        }

        .stock {
          color: #666;
          font-size: 13px;
          margin-right: 5px;
        }
      }

      // 停售
      .stop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        color: #fff;
        text-align: center;
        border-radius: 5px;
        margin: 0;

        span {
          position: absolute;
          left: 10px;
          top: 10px;
          color: #333;
          font-size: 24px;
        }
      }
    }
  }
}
</style>
